// components/popup-bottom/popup-bottom.js
Component({

        options: {
                multipleSlots: true // 在组件定义时的选项中启用多slot支持
        },

        /**
         * 组件的属性列表
         */
        properties: {

        },

        /**
         * 组件的初始数据
         */
        data: {
                visible: true, //模态框的状态  true-隐藏  false-显示
                animationData: {},//动画数据
        },

        /**
         * 组件的方法列表
         */
        methods: {
                // 显示遮罩层
                showModal: function () {
                        var that = this;
                        that.setData({
                                visible: false
                        })
                        var animation = wx.createAnimation({
                                duration: 600,//动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
                                timingFunction: 'ease',//动画的效果 默认值是linear
                        })
                        this.animation = animation
                        setTimeout(function () {
                                that.fadeIn();//调用显示动画
                        }, 50)
                },

                // 隐藏遮罩层
                hideModal: function () {
                        var that = this;
                        var animation = wx.createAnimation({
                                duration: 600,//动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
                                timingFunction: 'ease',//动画的效果 默认值是linear
                        })
                        this.animation = animation
                        that.fadeDown();//调用隐藏动画   
                        setTimeout(function () {
                                that.setData({
                                        visible: true
                                })
                        }, 450)//先执行下滑动画，再隐藏模块
                },

                //动画集
                fadeIn: function () {
                        this.animation.translateY(0).step()
                        this.setData({
                                animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
                        })
                },
                fadeDown: function () {
                        this.animation.translateY(500).step()
                        this.setData({
                                animationData: this.animation.export(),
                        })
                },
        }
})